<template>
  <main-card-admin title="学生绘图记录" :loading="loading" :main-body-style-obj="{ paddingTop: '12px', paddingBottom: '70px' }">
    <template #screen-space>
      <a-row justify="space-between">
        <a-col class="mr-24">
          <a-tree-select
            v-model:value="pageForm.orgId"
            class="w-400"
            :loading="organizationOptionsLoading"
            tree-default-expand-all
            :tree-data="treeData"
            placeholder="请选择班级"
            allow-clear
            @change="getDataList({ offset: 1 })"
          />
        </a-col>
        <a-col>
          <g-select-handle v-model:value="pageForm.name" placeholder="学生姓名、学号" @change="getDataList({ offset: 1 })" />
        </a-col>
      </a-row>
    </template>
    <ul v-if="dataList.length" class="drawing-record">
      <li v-for="item in dataList" :key="item.id" class="record-item" @click="openDetailModal(item)">
        <div class="img-wrap">
          <img :src="item?.imgPath" alt="绘图记录" />
        </div>
        <div class="record-info">
          <div class="user-wrap">
            <i class="iconfont icon-time-fill"></i>
            <p :title="`${item?.username} ${item?.number}`">{{ item?.username }} {{ item?.number }}</p>
          </div>
          <div class="time-wrap">
            <i class="iconfont icon-time-fill"></i>
            <p>{{ item?.generateTime }}</p>
          </div>
        </div>
      </li>
    </ul>
    <default-Image v-else />

    <template #page-footer>
      <div class="pagination-wrap">
        <g-pagination
          style="margin-top: 0"
          :offset="pageForm.offset"
          :limit="pageForm.limit"
          :total="pageForm.total"
          @update:offset="updateOffset"
          @update:limit="updateLimit"
          @change="getDataList"
        />
      </div>
    </template>
  </main-card-admin>

  <image-detail-modal ref="imageDetailModalRef" />
</template>

<script setup lang="ts">
  import { TreeSelectProps } from 'ant-design-vue/es/tree-select'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  import useList from '@/hooks/use-list'
  import { studentDrawingManageApi } from '@/services'
  import { teacherManageApi } from '@/services/api/aigc-admin'

  import ImageDetailModal from '../components/ImageDetailModal/index.vue'

  interface PageForm {
    name?: string
    orgId?: string | number
    limit: number
    columns: 'createTime' | 'updateTime' | ''
    order: 'desc' | 'asc'
  }

  const imageDetailModalRef = ref<InstanceType<typeof ImageDetailModal>>()

  const { pageForm, dataList, getDataList, loading } = useList<PageForm, any>(studentDrawingManageApi.list, {
    name: undefined,
    orgId: undefined,
    columns: '',
    limit: 24,
    order: 'desc'
  })
  getDataList()
  const updateOffset = (offset: number) => {
    Object.assign(pageForm.value, {
      offset
    })
  }
  const updateLimit = (limit: number) => {
    Object.assign(pageForm.value, {
      limit
    })
  }

  const treeData = ref<TreeSelectProps['treeData']>([])
  const { loading: organizationOptionsLoading } = useRequest<any>(teacherManageApi.getOrganizationTree, {
    manual: false,
    onSuccess({ data }) {
      const deep = (data: any[]): any[] | null => {
        if (!data) {
          return null
        }
        return data.map((item: any) => {
          return {
            label: item.orgName,
            value: item.id,
            // disabled: !(item.isAuthActive && item.level === 5),
            children: deep(item.children)
          }
        })
      }
      treeData.value = deep(data) || []
    }
  })

  const openDetailModal = (item: any) => {
    imageDetailModalRef.value?.open(item.id)
  }
</script>

<style lang="less" scoped>
  .drawing-record {
    display: grid;
    width: 100%;
    min-width: 200px;
    gap: 16px 8px;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));

    .record-item {
      display: flex;
      padding: 6px;
      height: 180px;
      background: #f0f0f0;
      border: 1px solid #e8e9eb;
      border-radius: 6px;
      box-sizing: border-box;
      flex-direction: column;
      gap: 6px 0;
      cursor: pointer;

      .img-wrap {
        width: 100%;
        min-height: 0;
        background: #fff;
        flex: 1;

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .record-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        height: 24px;
        gap: 0 8px;

        > div {
          display: flex;
          align-items: center;
          gap: 0 4px;
          color: rgba(0, 0, 0, 0.75);
          flex-shrink: 0;

          > i {
            color: #ccc;
          }
        }

        .user-wrap {
          flex: 1;
          min-width: 0;

          > p {
            .elliptical-1();
          }
        }

        .time-wrap {
          width: 100px;
        }
      }
    }
  }

  .pagination-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 36px;
    width: 100%;
    height: 52px;
    background: #fff;
    box-shadow: 0 -1px 3px 0 rgba(37, 37, 45, 0.2);
  }
</style>
